<script>
import Layout from '../../components/Layout'
import BlogDetail from './compononts/BlogDetail.vue';
import BlogTOC from './compononts/BlogTOC.vue';
import BlogComment from './compononts/BlogComment.vue';
import { getBlogDetails } from '@/api/blog';

export default {
  components: {
    Layout,
    BlogDetail,
    BlogTOC,
    BlogComment,
  },
  data() {
    return {
      data: null,
      isLoading: true,

    }
  },
  methods: {
    handScroll() {
      this.$bus.$emit('mainScroll', this.$refs.main)
    },
    handSetMainScroll(scrollNum) {
      this.$refs.main.scrollTop = scrollNum
    }
  },
  created() {
    getBlogDetails().then((resp) => {
      this.data = resp.data;
      this.isLoading = false

    })
  },
  mounted() {
    this.$refs.main.addEventListener('scroll', this.handScroll)
    this.$bus.$on('setMainScroll', this.handSetMainScroll)
  },
  beforeDestroy() {
    this.$bus.$emit('mainScroll')
    this.$bus.$off('setMainScroll', this.handSetMainScroll)
    this.$refs.main.removeEventListener('scroll', this.handScroll)
  },
}
</script>



<template>
  <div class="detail-container">
    <Layout>
      <template #default>
        <div class="main" v-loading="isLoading" ref="main">
          <BlogDetail v-if="data" :data="data" />
          <BlogComment v-if="data" />
        </div>
      </template>


      <template #right>
        <div class="right" v-loading="isLoading">
          <BlogTOC v-if="data" :toc="data.toc" />
        </div>
      </template>
    </Layout>
  </div>
</template>



<style lang='less' scoped>
.detail-container {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .main {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: scroll;
    scroll-behavior: smooth;
  }

  .right {
    flex: 0 0 auto;
    width: 250px;
    height: 100%;
    position: relative;
  }
}
</style>